<template>
  <div id="details">
      <!-- 头部栏位 -->
	<!--页面顶部-->
    <div id="nav-bottom">
        <!--顶部-->
        <div class="nav-top">
            <div class="top">
                <div class="py-container">
                    <div class="shortcut">
                        <ul class="fl">
                            <li class="f-item">青橙欢迎您！</li>
                            <li class="f-item">请<a href="login.html" target="_blank">登录</a><span><a href="register.html" target="_blank">免费注册</a></span></li>
                        </ul>
                        <div class="fr typelist">
                            <ul class="types">
                                <li class="f-item"><span>我的订单</span></li>
                                
                                <li class="f-item"><span><a href="javascript:;" @click="$router.push('/cart')">我的购物车</a></span></li>
                                <li class="f-item"><span><a href="home.html" target="_blank">我的青橙</a></span></li>			
                                <li class="f-item"><span>青橙会员</span></li>						
                                <li class="f-item"><span>企业采购</span></li>						
                                <li class="f-item"><span>关注青橙</span></li>
                                <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
                                <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>				
                                <li class="f-item"><span>网站导航</span></li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
            </div>

            <!--头部-->
            <div class="header">
                <div class="py-container">
                    <div class="yui3-g Logo">
                        <div class="yui3-u Left logoArea">
                            <a class="logo-bd" title="青橙" href="index.html" target="_blank"></a>
                        </div>
                        <div class="yui3-u Rit searchArea">
                            <div class="search">
                                <form action="" class="sui-form form-inline">
                                    <!--searchAutoComplete-->
                                    <div class="input-append">
                                        <input type="text" id="autocomplete"   class="input-error input-xxlarge" @input="searchVal" />
                                        <button class="sui-btn btn-xlarge btn-danger" type="button" @click="gotoSearch()">搜索</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                    </div>

                </div>
            </div>
        </div>
    </div>

        <div class="py-container">
            <div id="item">
                <div class="crumb-wrap">
                    <ul class="sui-breadcrumb">
                        <li>
                            <a href="#">手机、数码、通讯</a>
                        </li>
                        <li>
                            <a href="#">手机</a>
                        </li>
                        <li>
                            <a href="#">Apple苹果</a>
                        </li>
                        <li class="active">iphone 6S系类</li>
                    </ul>
                </div>
                <!--product-info-->
                <div class="product-info">
                    <div class="fl preview-wrap">
                        <!--放大镜效果-->
                        <div class="zoom">
                            <!--默认第一个预览-->
                            <div id="preview" class="spec-preview">
                                <span class="jqzoom"><img :jqimg="detailsinfo.Maximg[index1]" :src="detailsinfo.Minimg[index1]" /></span>
                            </div>
                            <!--下方的缩略图-->
                            <div class="spec-scroll">
                                <a class="prev">&lt;</a>
                                <!--左右按钮-->
                                <div class="items">
                                    <ul>
                                        <li v-for="(item, index) in detailsinfo.samllimg" :key="index"><img :src="item" :bimg="detailsinfo.Maximg[index]" @mousemove="change(index)" /></li>
                                    </ul>
                                </div>
                                <a class="next">&gt;</a>
                            </div>
                        </div>
                        <div class="product-collect">
                            <a href="javascript:;" id="star"><img src="img/_/shi_heart.png" alt=""> 收藏</a>
                        </div>
                    </div>
                    <div class="fr itemInfo-wrap">
                        <div class="sku-name">
                            <h4>{{detailsinfo.title}}</h4>
                        </div>
                        <div class="news">
                            <span><img src="img/_/clock.png"/>青橙秒杀</span>
                            <span class="overtime">距离结束：01:56:78</span>
                            </div>
                        <div class="summary">
                            <div class="summary-wrap">    
                                <div class="fl title">
                                    <i>价格</i>
                                </div>
                                <div class="fl price">
                                    <i>¥</i>
                                    <em>{{detailsinfo.price}}</em>
                                    <span>降价通知</span>
                                </div>
                                <div class="fr remark">
                                    <i>累计评价</i><em>612188</em>
                                </div>
                            </div>
                            <div class="summary-wrap">
                                <div class="fl title">
                                    <i>促销</i>
                                </div>
                                <div class="fl fix-width">
                                    <i class="red-bg">加价购</i>
                                    <em class="t-gray">{{detailsinfo.cuxiao}}</em>
                                </div>
                            </div>
                        </div>
                        <div class="support">
                            <div class="summary-wrap">
                                <div class="fl title">
                                    <i>支持</i>
                                </div>
                                <div class="fl fix-width">
                                    <em class="t-gray">{{detailsinfo.zhici}}</em>
                                </div>
                            </div>
                            <div class="summary-wrap">
                                <div class="fl title">
                                    <i>配 送 至</i>
                                </div>
                                <div class="fl fix-width">
                                    <em class="t-gray">{{detailsinfo.peisong}}</em>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix choose">
                            <div id="specification" class="summary-wrap clearfix">
                                <dl>
                                    <dt>
                                        <div class="fl title">
                                            <i>选择颜色</i>
                                        </div>
                                    </dt>
                                    <dd v-for='(item, index) in detailsinfo.yanse' :key="index" @click="btn1(index)"><a href="javascript:;" :class="index === sindex ? 'selected':''" >{{item}}<span title="点击取消选择" v-if="index === sindex">&nbsp;</span></a></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <div class="fl title">
                                            <i>内存容量</i>
                                        </div>
                                    </dt>
                                    <dd v-for='(item, index) in detailsinfo.neicun' :key="index" @click="btn2(index)"><a href="javascript:;" :class="index === nindex ? 'selected':''" >{{item}}<span title="点击取消选择" v-if="index === nindex">&nbsp;</span></a></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <div class="fl title">
                                            <i>选择版本</i>
                                        </div>
                                    </dt>
                                    <dd v-for='(item, index) in detailsinfo.banben' :key="index" @click="btn3(index)"><a href="javascript:;" :class="index === bindex ? 'selected':''" >{{item}}<span title="点击取消选择" v-if="index === bindex">&nbsp;</span></a></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <div class="fl title">
                                            <i>购买方式</i>
                                        </div>
                                    </dt>
                                    <dd v-for='(item, index) in detailsinfo.goumai' :key="index" @click="btn4(index)"><a href="javascript:;" :class="index === gindex ? 'selected':''" >{{item}}<span title="点击取消选择" v-if="index === gindex">&nbsp;</span></a></dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <div class="fl title">
                                            <i>套装</i>
                                        </div>
                                    </dt>
                                    <dd v-for='(item, index) in detailsinfo.taozhuang' :key="index" @click="btn5(index)"><a href="javascript:;" :class="index === tindex ? 'selected':''" >{{item}}<span title="点击取消选择" v-if="index === tindex">&nbsp;</span></a></dd>
                                </dl>
                            </div>
                            <div class="summary-wrap">
                                <div class="fl title">
                                    <div class="control-group">
                                        <div class="controls">
                                            <input autocomplete="off" type="text" minnum="1" class="itxt" v-model="val" />
                                            <a href="javascript:void(0)" class="increment plus" @click="jia()">+</a>
                                            <a href="javascript:void(0)" class="increment mins" @click="jian()">-</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="fl">
                                    <ul class="btn-choose unstyled">
                                        <li>
                                            <a href="javascript:;" class="addshopcar" @click="btncart()">加入购物车</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--product-detail-->
                <div class="clearfix product-detail">
                    <div class="fl aside">
                        <div class="shop">
                            <span class="fl">三星旗舰店</span><span class="fr"><a href="shop.html" target="_blank" class="sui-btn btn-bordered btn-danger">进入店铺</a></span>
                        </div>
                        <div class="clearfix"></div>
                        <ul class="sui-nav nav-tabs tab-wraped">
                            <li class="active">
                                <a href="#index" data-toggle="tab">
                                    <span>相关分类</span>
                                </a>
                            </li>
                            <li>
                                <a href="#profile" data-toggle="tab">
                                    <span>推荐品牌</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content tab-wraped">
                            <div id="index" class="tab-pane active">
                                <ul class="part-list unstyled">
                                    <li>手机</li>
                                    <li>手机壳</li>
                                    <li>内存卡</li>
                                    <li>Iphone配件</li>
                                    <li>贴膜</li>
                                    <li>手机耳机</li>
                                    <li>移动电源</li>
                                    <li>平板电脑</li>
                                </ul>
                                <ul class="goods-list unstyled">
                                    <li>
                                        <div class="list-wrap">
                                            <div class="p-img">
                                                <img src="img/_/part01.png" />
                                            </div>
                                            <div class="attr">
                                                <em>Apple苹果iPhone 6s (A1699)</em>
                                            </div>
                                            <div class="price">
                                                <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                            </div>
                                            <div class="operate">
                                                <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="list-wrap">
                                            <div class="p-img">
                                                <img src="img/_/part02.png" />
                                            </div>
                                            <div class="attr">
                                                <em>Apple苹果iPhone 6s (A1699)</em>
                                            </div>
                                            <div class="price">
                                                <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                            </div>
                                            <div class="operate">
                                                <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="list-wrap">
                                            <div class="p-img">
                                                <img src="img/_/part03.png" />
                                            </div>
                                            <div class="attr">
                                                <em>Apple苹果iPhone 6s (A1699)</em>
                                            </div>
                                            <div class="price">
                                                <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                            </div>
                                            <div class="operate">
                                                <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                            </div>
                                        </div>
                                        <div class="list-wrap">
                                            <div class="p-img">
                                                <img src="img/_/part02.png" />
                                            </div>
                                            <div class="attr">
                                                <em>Apple苹果iPhone 6s (A1699)</em>
                                            </div>
                                            <div class="price">
                                                <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                            </div>
                                            <div class="operate">
                                                <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                            </div>
                                        </div>
                                        <div class="list-wrap">
                                            <div class="p-img">
                                                <img src="img/_/part03.png" />
                                            </div>
                                            <div class="attr">
                                                <em>Apple苹果iPhone 6s (A1699)</em>
                                            </div>
                                            <div class="price">
                                                <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                            </div>
                                            <div class="operate">
                                                <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div id="profile" class="tab-pane">
                                <p>推荐品牌</p>
                            </div>
                        </div>
                    </div>
                    <div class="fr detail">
                        <div class="clearfix fitting">
                            <h4 class="kt">选择搭配</h4>
                            <div class="good-suits">
                                <div class="fl master">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/l-m01.png" />
                                        </div>
                                        <em>￥5299</em>
                                        <i>+</i>
                                    </div>
                                </div>
                                <div class="fl suits">
                                    <ul class="suit-list">
                                        <li class="">
                                            <div id="">
                                                <img src="img/_/dp01.png" />
                                            </div>
                                            <i>Feless费勒斯VR</i>
                                            <label data-toggle="checkbox" class="checkbox-pretty">
        <input type="checkbox"><span>39</span>
    </label>
                                        </li>
                                        <li class="">
                                            <div id=""><img src="img/_/dp02.png" /> </div>
                                            <i>Feless费勒斯VR</i>
                                            <label data-toggle="checkbox" class="checkbox-pretty">
        <input type="checkbox"><span>50</span>
    </label>
                                        </li>
                                        <li class="">
                                            <div id=""><img src="img/_/dp03.png" /></div>
                                            <i>Feless费勒斯VR</i>
                                            <label data-toggle="checkbox" class="checkbox-pretty">
        <input type="checkbox"><span>59</span>
    </label>
                                        </li>
                                        <li class="">
                                            <div id=""><img src="img/_/dp04.png" /></div>
                                            <i>Feless费勒斯VR</i>
                                            <label data-toggle="checkbox" class="checkbox-pretty">
        <input type="checkbox"><span>99</span>
    </label>
                                        </li>
                                    </ul>
                                </div>
                                <div class="fr result">
                                    <div class="num">已选购0件商品</div>
                                    <div class="price-tit"><strong>套餐价</strong></div>
                                    <div class="price">￥5299</div>
                                    <button class="sui-btn  btn-danger addshopcar">加入购物车</button>
                                </div>
                            </div>
                        </div>
                        <div class="tab-main intro">
                            <ul class="sui-nav nav-tabs tab-wraped">
                                <li class="active">
                                    <a href="#one" data-toggle="tab">
                                        <span>商品介绍</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#two" data-toggle="tab">
                                        <span>规格与包装</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#three" data-toggle="tab">
                                        <span>售后保障</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#four" data-toggle="tab">
                                        <span>商品评价</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#five" data-toggle="tab">
                                        <span>手机社区</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                            <div class="tab-content tab-wraped">
                                <div id="one" class="tab-pane active">
                                    <ul class="goods-intro unstyled">
                                        <li>分辨率：1920*1080(FHD)</li>
                                        <li>后置摄像头：1200万像素</li>
                                        <li>前置摄像头：500万像素</li>
                                        <li>核 数：其他</li>
                                        <li>频 率：以官网信息为准</li>
                                        <li>品牌： Apple</li>
                                        <li>商品名称：APPLEiPhone 6s Plus</li>
                                        <li>商品编号：1861098</li>
                                        <li>商品毛重：0.51kg</li>
                                        <li>商品产地：中国大陆</li>
                                        <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                        <li>系统：苹果（IOS）</li>
                                        <li>像素：1000-1600万</li>
                                        <li>机身内存：64GB</li>
                                    </ul>
                                    <div class="intro-detail">
                                        <img src="img/_/intro01.png" />
                                        <img src="img/_/intro02.png" />
                                        <img src="img/_/intro03.png" />
                                    </div>
                                </div>
                                <div id="two" class="tab-pane">
                                    <p>规格与包装</p>
                                </div>
                                <div id="three" class="tab-pane">
                                    <p>售后保障</p>
                                </div>
                                <div id="four" class="tab-pane">
                                    <p>商品评价</p>
                                </div>
                                <div id="five" class="tab-pane">
                                    <p>手机社区</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--like-->
                <div class="clearfix"></div>
                <div class="like">
                    <h4 class="kt">猜你喜欢</h4>
                    <div class="like-list">
                        <ul class="yui3-g">
                            <li class="yui3-u-1-6">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/itemlike01.png" />
                                    </div>
                                    <div class="attr">
                                        <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>3699.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有6人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-6">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/itemlike02.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4388.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-6">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/itemlike03.png" />
                                    </div>
                                    <div class="attr">
                                        <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-6">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/itemlike04.png" />
                                    </div>
                                    <div class="attr">
                                        <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-6">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/itemlike05.png" />
                                    </div>
                                    <div class="attr">
                                        <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-6">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/itemlike06.png" />
                                    </div>
                                    <div class="attr">
                                        <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部栏位 -->
        <!--页面底部-->
    <div class="clearfix footer">
        <div class="py-container">
            <div class="footlink">
                <div class="Mod-service">
                    <ul class="Mod-Service-list">
                        <li class="grid-service-item intro  intro1">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item  intro intro2">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item intro  intro3">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item  intro intro4">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item intro intro5">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>

                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>品优购E卡</li>
                                <li>品优购通信</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <img src="img/wx_cz.jpg">
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们<span class="space"></span></li>
                        <li>联系我们<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>商家入驻<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                    <p>京ICP备08001421号京公网安备110108007702</p>
                </div>
            </div>
        </div>
    </div>
    <!--页面底部END-->
        <!--侧栏面板开始--><div class="J-global-toolbar">
        <div class="toolbar-wrap J-wrap">
            <div class="toolbar">
                <div class="toolbar-panels J-panel">

                    <!-- 购物车 -->
                    <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-cart toolbar-animate-out">
                        <h3 class="tbar-panel-header J-panel-header">
                            <a href="" class="title"><i></i><em class="title">购物车</em></a>
                            <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('cart');" ></span>
                        </h3>
                        <div class="tbar-panel-main">
                            <div class="tbar-panel-content J-panel-content">
                                <div id="J-cart-tips" class="tbar-tipbox hide">
                                    <div class="tip-inner">
                                        <span class="tip-text">还没有登录，登录后商品将被保存</span>
                                        <a href="#none" class="tip-btn J-login">登录</a>
                                    </div>
                                </div>
                                <div id="J-cart-render">
                                    <!-- 列表 -->
                                    <div id="cart-list" class="tbar-cart-list">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 小计 -->
                        <div id="cart-footer" class="tbar-panel-footer J-panel-footer">
                            <div class="tbar-checkout">
                                <div class="jtc-number"> <strong class="J-count">{{count}}</strong>件商品 </div>
                                <div class="jtc-sum"> 共计：<strong class="J-total">¥{{zprice}}</strong> </div>
                                <a class="jtc-btn J-btn" href="javascript:;" @click="$router.push('/cart')">去购物车结算</a>
                            </div>
                        </div>
                    </div>

                    <!-- 我的关注 -->
                    <div style="visibility: hidden;" data-name="follow" class="J-content toolbar-panel tbar-panel-follow">
                        <h3 class="tbar-panel-header J-panel-header">
                            <a href="#" target="_blank" class="title"> <i></i> <em class="title">我的关注</em> </a>
                            <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('follow');"></span>
                        </h3>
                        <div class="tbar-panel-main">
                            <div class="tbar-panel-content J-panel-content">
                                <div class="tbar-tipbox2">
                                    <div class="tip-inner"> <i class="i-loading"></i> </div>
                                </div>
                            </div>
                        </div>
                        <div class="tbar-panel-footer J-panel-footer"></div>
                    </div>

                    <!-- 我的足迹 -->
                    <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-history toolbar-animate-in">
                        <h3 class="tbar-panel-header J-panel-header">
                            <a href="#" target="_blank" class="title"> <i></i> <em class="title">我的足迹</em> </a>
                            <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('history');"></span>
                        </h3>
                        <div class="tbar-panel-main">
                            <div class="tbar-panel-content J-panel-content">
                                <div class="jt-history-wrap">
                                    <ul>
                                        <!--<li class="jth-item">
                                            <a href="#" class="img-wrap"> <img src="../../.../portal/img/like_03.png" height="100" width="100" /> </a>
                                            <a class="add-cart-button" href="#" target="_blank">加入购物车</a>
                                            <a href="#" target="_blank" class="price">￥498.00</a>
                                        </li>
                                        <li class="jth-item">
                                            <a href="#" class="img-wrap"> <img src="../../../portal/img/like_02.png" height="100" width="100" /></a>
                                            <a class="add-cart-button" href="#" target="_blank">加入购物车</a>
                                            <a href="#" target="_blank" class="price">￥498.00</a>
                                        </li>-->
                                    </ul>
                                    <a href="#" class="history-bottom-more" target="_blank">查看更多足迹商品 &gt;&gt;</a>
                                </div>
                            </div>
                        </div>
                        <div class="tbar-panel-footer J-panel-footer"></div>
                    </div>

                </div>

                <div class="toolbar-header"></div>

                <!-- 侧栏按钮 -->
                <div class="toolbar-tabs J-tab">
                    <div onclick="cartPanelView.tabItemClick('cart')" class="toolbar-tab tbar-tab-cart" data="购物车" tag="cart" >
                        <i class="tab-ico"></i>
                        <em class="tab-text"></em>
                        <span class="tab-sub J-count ">{{count}}</span>
                    </div>
                    <div onclick="cartPanelView.tabItemClick('follow')" class="toolbar-tab tbar-tab-follow" data="我的关注" tag="follow" >
                        <i class="tab-ico"></i>
                        <em class="tab-text"></em>
                        <span class="tab-sub J-count hide">0</span>
                    </div>
                    <div onclick="cartPanelView.tabItemClick('history')" class="toolbar-tab tbar-tab-history" data="我的足迹" tag="history" >
                        <i class="tab-ico"></i>
                        <em class="tab-text"></em>
                        <span class="tab-sub J-count hide">0</span>
                    </div>
                </div>

                <div class="toolbar-footer">
                    <div class="toolbar-tab tbar-tab-top" > <a href="#"> <i class="tab-ico  "></i> <em class="footer-tab-text">顶部</em> </a> </div>
                    <div class="toolbar-tab tbar-tab-feedback" > <a href="#" target="_blank"> <i class="tab-ico"></i> <em class="footer-tab-text ">反馈</em> </a> </div>
                </div>

                <div class="toolbar-mini"></div>

            </div>

            <div id="J-toolbar-load-hook"></div>

        </div>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations} from 'vuex'
export default {
    name: 'Details',
    data() {
      return {
          sVal: '',
          // 购买数量
          val: 1,
          // 商品详情数据
          detailsinfo: {},
          // 显示图片的索引
          index1: 0,
          // 颜色索引
          sindex: 0,
          // 内存索引
          nindex: 0,
          // 版本索引
          bindex: 0,
          // 购买索引
          gindex: 0,
          // 套装索引
          tindex: 0,
          flag: true
      }
    },
    methods: {
        ...mapMutations(['getcoutn']),
        // 监听用户搜索内容
        searchVal(e) {
            this.sVal = e.target.value
        },
        // 搜索跳转
        gotoSearch() {
            if(this.sVal !== '') {
                this.$router.push(`/search/${this.sVal}`)
                return false
            } else {
                alert('请输入搜索内容')
                return false
            }
        },
        // 获取商品详情数据
        async getDetails() {
            const {data: res} = await this.axios.get('/details')
            this.detailsinfo = res.data
            console.log(this.detailsinfo)
        },
        // 监听图片变化
        change(i) {
            this.index = i
        },
        // 颜色
        btn1(i) {
            this.sindex = i
        },
        btn2(i) {
            this.nindex = i
        },
        btn3(i) {
            this.bindex = i
        },
        btn4(i) {
            this.gindex = i
        },
        btn5(i) {
            this.tindex = i
        },
        jia() {
            this.val++
            return false
        },
        jian() {
            if(this.val === 1) {
                return
            }
            this.val--
            return false
        },
        // 点击加入购物车
        btncart() {
            const id = parseInt(location.hash.substring(10))
            const cartArr = []
            const obj = {
                id: id,
                pirce: this.detailsinfo.price,
                num: this.val,
                isok: true
            }
            if(!localStorage.hasOwnProperty('Cart')) {
                cartArr.push(obj)
                localStorage.setItem('Cart', JSON.stringify(cartArr))
            } else if(localStorage.hasOwnProperty('Cart')) {
                const keycart = JSON.parse(localStorage.getItem('Cart'))
                keycart.forEach(item => {
                if(item.id === id) {
                    item.num+= this.val
                    this.flag = false
                }
                })
                if(this.flag) {
                keycart.push(obj)
                localStorage.setItem('Cart', JSON.stringify(keycart))
                return
                }
                localStorage.setItem('Cart', JSON.stringify(keycart))
                this.flag = true
            }
            this.getcoutn()
        }
    },
    computed: {
        ...mapState(['count', 'zprice'])
    },
    created() {
        this.getDetails()
        this.getcoutn()
    }
}
</script>

<style lang="less" scoped>
 #details {
     a {
  color: #666;
}
.sui-btn:active,
.sui-btn.active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: #ff4103;
  border: 1px solid #ff4103;
}
.btn-danger {
  border-radius: 0;
}
#item {
  margin: 15px 0;
  font-family: "微软雅黑";
}
.preview-wrap {
  width: 400px;
}
.itemInfo-wrap {
  width: 700px;
}
.aside {
  width: 210px;
}
.detail {
  width: 980px;
}
em {
  font-style: normal;
}
.sui-breadcrumb {
  padding: 9px 15px 0 0;
  margin: 0 0 9px;
}
.product-info {
  overflow: hidden;
  margin: 5px 0 15px;
}
.itemInfo-wrap {
  font-family: "宋体";
}
.summary-wrap .price {
  color: #c81623;
}
.summary-wrap .price em {
  font-size: 24px;
  font-weight: 700;
}
.summary-wrap .price i {
  font-size: 16px;
}
.summary-wrap .price span {
  font-size: 12px;
}
.product-detail {
  margin: 30px 0;
}
.red-bg {
  background: #b61d1d;
  padding: 3px;
  color: #fff;
}
.sku-name h4 {
  font-weight: 700;
  font-size: 16px;
  color: #333;
  font-family: "微软雅黑";
}
.news {
  padding-left: 10px;
  line-height: 30px;
  font-weight: 700;
  color: #fff;
  background: url(../../public/img/_/seckillbg.png) repeat-x;
}
.news span img {
  margin-top: -5px;
  margin-right: 5px;
}
.news .overtime {
  float: right;
  padding-right: 15px;
}
.summary {
  background: #fee9eb;
  padding: 7px;
}
.support {
  border-bottom: 1px solid #ededed;
  padding-bottom: 5px;
}
.summary-wrap {
  overflow: hidden;
  line-height: 28px;
  margin-top: 10px;
}
.summary-wrap dl {
  overflow: hidden;
}
.summary-wrap dl a {
  color: #666;
  line-height: 24px;
  padding: 2px 14px;
  margin-right: 5px;
  display: block;
  float: left;
  position: relative;
  outline: 0;
  border-top: 1px solid #eee;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-left: 1px solid #eee;
  background-color: #fff;
  text-decoration: none;
}
.summary-wrap .selected {
  border: 1px solid #ff713f;
}
.summary-wrap .locked {
  color: #d6d6d6;
  cursor: not-allowed;
  border-color: #bbb;
  border-style: dotted;
}
.summary-wrap a span {
  width: 13px;
  height: 13px;
  display: none;
  position: absolute;
  right: 0;
  _right: -1px;
  bottom: 0;
  _bottom: -1px;
  overflow: hidden;
  background: url(../../public/img/choosed.png) no-repeat;
}
.summary-wrap .selected span {
  display: block;
}
.title {
  margin-right: 15px;
}
.controls {
  width: 48px;
  position: relative;
}
.controls a {
  text-decoration: none;
}
.controls .itxt {
  display: block;
  width: 38px;
  height: 34px;
  line-height: 42px;
  border: 1px solid #ddd;
  text-align: center;
  color: #555;
  float: left;
  border-right: 0;
}
.controls .plus {
  display: block;
  width: 15px;
  text-align: center;
  height: 17px;
  line-height: 17px;
  overflow: hidden;
  background: #f1f1f1;
  color: #666;
  position: absolute;
  right: -8px;
  border: 1px solid #ccc;
}
.controls .mins {
  display: block;
  width: 15px;
  text-align: center;
  height: 17px;
  line-height: 17px;
  overflow: hidden;
  background: #f1f1f1;
  color: #666;
  position: absolute;
  right: -8px;
  border: 1px solid #ccc;
  top: 19px;
  border-top: 0;
}
.red-bg {
  background: #c81623;
  color: #fff;
  padding: 3px;
}
.fix-width {
  width: 520px;
}
.t-gray {
  color: #999;
}
ul.btn-choose li {
  float: left;
  margin: 0 10px 0 0;
}
ul.btn-choose li .btn-xlarge .addshopcar {
  font-size: 16px;
}
.unstyled .addshopcar{
  height: 36px;
  line-height: 36px;
  padding: 0 25px;
  display: inline-block;
}
.addshopcar {
  padding: 10px 25px;
  background: #ff713f;
  border: 1px solid #ff713f;
  font-size: 16px;
  font-family: "微软雅黑";
  color: #fff;
}
ul.btn-choose li .btn-xlarge {
  font-size: 12px;
  border-radius: 0;
}
.sui-btn:active,
.sui-btn.active {
  background-color: #c81623;
  color: #fff;
}
ul.part-list {
  overflow: hidden;
}
ul.part-list li {
  line-height: 18px;
  width: 50%;
  float: left;
  border-bottom: 1px dashed #ededed;
  line-height: 28px;
}
.sui-btn.btn-bordered.btn-danger {
  border: 1px solid #ff713f;
  color: #ff713f;
}
.sui-nav.nav-tabs.tab-wraped > li {
  width: 50%;
}
.sui-nav.nav-tabs.tab-wraped > li > a {
  padding: 11px;
  text-align: center;
}
.sui-nav.nav-tabs.tab-wraped > li.active > a {
  padding-top: 9px;
}
.intro .sui-nav.nav-tabs.tab-wraped > li.active > a {
  font-weight: 400;
  border: 0;
  padding-top: 12px;
  background: #ff713f;
  color: #fff;
}
.tab-content.tab-wraped {
  padding: 10px;
}
.summary-price-wrap {
  overflow: hidden;
}
.goods-list .operate {
  margin: 5px 40px;
}
ul.goods-list li {
  margin: 5px 0 15px;
  border-bottom: 1px solid #ededed;
  padding-bottom: 5px;
}
ul.goods-intro li {
  line-height: 26px;
}
.p-img img {
  padding-left: 20px;
}
.suits .list-wrap {
  float: left;
  margin: 0 10px;
}
.good-suits {
  overflow: hidden;
}
.master,
.suits,
.result {
  height: 140px;
  padding: 10px;
}
.master .list-wrap {
  position: relative;
  text-align: center;
}
.master .list-wrap i {
  position: absolute;
  top: 48px;
  right: -25px;
  font-size: 16px;
}
.master .list-wrap em {
  color: #c81623;
  font-size: 16px;
  font-weight: 700;
}
.suits ul li {
  float: left;
  list-style-type: none;
  padding: 0 20px;
}
.result {
  line-height: 26px;
  border-left: 1px solid #ddd;
  padding: 20px;
}
.result .price {
  color: #b1191a;
  font-size: 16px;
}
.fitting,
.like {
  border: 1px solid #ddd;
  margin-bottom: 15px;
}
.intro .sui-nav.nav-tabs.tab-wraped {
  background: #ededed;
}
.intro .sui-nav.nav-tabs.tab-wraped > li {
  width: auto;
}
.intro .tab-content.tab-wraped {
  border: 0;
}
.kt {
  border-bottom: 1px solid #ddd;
  background: #f1f1f1;
  color: #333;
  margin: 0;
  padding: 5px 0 5px 15px;
}
.like .like-list {
  padding: 15px;
}
.like-list ul li .attr,
.like-list ul li .price,
.like-list ul li .commit {
  padding-left: 15px;
  font-family: "微软雅黑";
}
.list-wrap .price {
  font-size: 16px;
  color: #c81623;
}
.like-list ul li .price {
  margin-bottom: 20px;
}
.like-list ul li .list-wrap {
  line-height: 22px;
}
#item .zoom {
  width: 420px;
}
#item .product-collect a {
  color: #555;
  text-decoration: none;
}
#item .product-collect {
  margin-top: 6px;
}
#item .product-collect img {
  vertical-align: bottom;
  width: 16px;
}
#item .product-detail .shop {
  padding: 5px;
  margin-bottom: 15px;
  overflow: hidden;
  line-height: 26px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid #ddd;
  background: #f1f1f1;
}

 }
</style>
